<template>
  <!-- 订单退款 -->
  <div
    v-if="(order.status === '3') | (order.status === '4')"
    class="status-box refund-succeed"
  >
    <p class="title">退款成功</p>
    <p class="desc">
      退款到账时间视银行处理速度而定，一般<span>1～3</span>个工作日内可到账
    </p>
  </div>
  <!-- 订单超时 -->
  <div v-else-if="order.status === '-1'" class="status-box order-timeout">
    <p class="title">订单超时</p>
    <p class="desc">订单超时未支付，已自动取消</p>
  </div>
  <!-- 订单待支付 -->
  <div v-else-if="order.status === '0'">
    <Countdown />
  </div>
  <!-- 订单成功 -->
  <div v-else-if="order.status === '1'" class="status-box order-success">
    <p class="title">{{ Text }}</p>
    <p class="desc" v-if="isBeforeStart()">请于{{ order.startDate | formatTime() }}前到影院取票</p>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import Countdown from '@/components/CountDown'
import { mapState } from 'vuex'
import { getOrderById } from '@/api/order'
export default {
  name: 'TtmsStatus',
  components: {
    Countdown
  },
  computed: {
    ...mapState('order', ['end', 'order']),
    Text () {
      return this.isBeforeStart() ? '订单成功' : '订单完成'
    }
  },
  data () {
    return {
      orderId: this.$route.params.id,
      isCount: true
    }
  },

  created () {
    // 获取订单详情
    getOrderById(this.orderId).then((res) => {
      this.$store.commit('order/setOrder', res.data)
      this.$store.commit(
        'order/setEnd',
        dayjs(res.data.expireTime).format('YYYY-MM-DD HH:mm:ss')
      )
    })
  },

  methods: {
    // 当天是否在开始时间之前
    isBeforeStart () {
      const now = dayjs()
      const start = dayjs(this.order.startDate)
      return now.isBefore(start)
    }
  }
}
</script>

<style lang="scss" scoped>
.status-box {
  height: 110px;
  padding-left: 85px;
  padding-top: 28px;
  margin-bottom: 40px;
  background-repeat: no-repeat;
  background-position: 30px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.status-box.refund-succeed {
  background-color: #e8f8ff;
  background-image: url();
}
.status-box.order-timeout {
  background-color: #fff;
  border: 1px solid #e1e1e1;
  text-align: center;
  padding: 40px 0;
  background-image: url(https://img.alicdn.com/tfs/TB1Q8Q9X4D1gK0jSZFsXXbldVXa-200-200.png);
}
.order-success {
    padding-top: 40px;
    background-color: #f4fff8;
    background-image: url();
}
.status-box.order-timeout .title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 14px;
}
.status-box.order-timeout .desc {
  font-size: 14px;
  color: #999;
}
.status-box.refund-succeed .title,
.status-box.refund-succeed span {
  color: #4dbcf3;
}
.status-box .title {
  font-size: 24px;
  font-weight: 700;
}
p {
  margin: 0;
  line-height: normal;
}
.status-box .desc {
  font-size: 14px;
  color: #999;
}
.status-box.refund-succeed .title,
.status-box.refund-succeed span {
  color: #4dbcf3;
}
</style>
